<template>
  <div>
    <button>按钮</button>
    <el-button type="danger">按钮</el-button>
    <el-button type="primary" size="default" @click="">按钮</el-button>

    <el-button type="primary" size="default" @click="" circle>圆按钮</el-button>

    <el-row>
      <el-radio-group v-model="radio" @change="selectRadio">
        <el-radio label="男"></el-radio>
        <el-radio label="女"></el-radio>
      </el-radio-group>

      <el-checkbox-group v-model="checkList" @change="selectCheckBox">
        <el-checkbox label="复选框 A"></el-checkbox>
        <el-checkbox label="复选框 B"></el-checkbox>
      </el-checkbox-group>

      <el-date-picker
        v-model="date"
        type="date"
        placeholder="选择日期"
        value-format="yyyy-MM-dd"
        @change="changeDate"
      ></el-date-picker>
      <el-date-picker
        v-model="datetime"
        type="datetime"
        placeholder="选择日期时间"
        value-format="yyyy-MM-dd HH:mm:ss"
        @change="changeDateTime"
      ></el-date-picker>

      <el-date-picker
        v-model="daterange"
        type="daterange"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        value-format="yyyy-MM-dd"
        @change="changeDateRange"
      ></el-date-picker>
    </el-row>

    <el-row style="margin: 20px 0">
      <el-table
        :data="tableData"
        border
        :header-cell-style="{ background: 'aliceblue', fontSize: '16px' }"
      >
        <el-table-column
          label="序号"
          prop="id"
          align="center"
        ></el-table-column>
        <el-table-column
          label="名称"
          prop="name"
          align="center"
        ></el-table-column>
        <el-table-column
          label="年龄"
          prop="age"
          align="center"
        ></el-table-column>
        <el-table-column
          label="地址"
          prop="address"
          align="center"
        ></el-table-column>
        <el-table-column label="操作">
          <template v-slot="scope">
            <el-button type="primary" @click="edit(scope.row)">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-row>
  </div>
</template>

<script>
export default {
  name: 'test',
  data() {
    return {
      radio: '',
      checkList: [],
      date: '',
      datetime: '',
      daterange: '',
      tableData: [
        { id: 1, name: 'a', address: '123', age: 12 },
        { id: 2, name: 'b', address: '456', age: 13 },
        { id: 3, name: 'c', address: '789', age: 14 }
      ]
    }
  },
  methods: {
    selectRadio() {
      alert(this.radio)
    },
    selectCheckBox() {
      console.log(this.checkList)
    },
    changeDate() {
      console.log(this.date)
    },
    changeDateTime() {
      console.log(this.datetime)
    },
    changeDateRange() {
      console.log(this.daterange)
    },
    edit(row) {
      // alert(row.name)
      // this.$message.info(row.name)
      // this.$notify.info(row.name)
      this.$confirm('这是什么个玩意儿？', '提示', {
        type: 'warning'
      })
        .then(res => {
          this.$message.success('ok 我点击了确认')
        })
        .catch(() => {
          this.$message.warning('ok 我点击了取消')
        })
    }
  }
}
</script>
